<div id="homeBody">
	<div class="container-fluid" id="homeHead">
		<div class="col-md-10 col-md-offset-1 text-center">
			<h3>{{ name }}</h3>
		</div>

		<div class="homeNav">
			<ul>
				<li ng-if="userNow == name"><a href="{{ name }}/settings">账号设置</a></li>
				<li><a href="/">返回首页</a></li>
			</ul>
		</div>
	</div>

	<div class="container-fluid" id="homeMain">
		<ul class="col-md-10 col-md-offset-1">
			 <li ng-repeat="post in posts" post-single class="post-single">

                 <div class="post-content">
                     <ul ng-if="userNow == name" class="postHandlerNav">
                         <li><a href="javascript:;" title="编辑" class="editPostButton"><span class="glyphicon glyphicon-edit"></span></a></li>
                         <li><a href="javascript:;" title="删除" ng-click="deletePost($index)"><span class="glyphicon glyphicon-remove"></span></a></li>
                     </ul>
                     <!--隐藏div，存储原始输入内容，用于编辑-->
                     <div class="contentHidden">{{ post.content }}</div>
                     <span class="postIdHidden">{{ post._id }}</span>
                     <!--发表时间-->
                     <div class="post-time">
                         {{ post.time | date:'yyyy-MM-dd HH:mm:ss' }}
                     </div>

                     <!-- 经过格式转换的内容  -->
                     <span ng-bind-html='post.content | contentFilter'></span>
                     <div class="infos">
                         <div class="opta">
                             <span class="glyphicon glyphicon-tags"></span>
                             <span ng-repeat="tag in post.tags">
                                <a href="/tag/{{ tag }}" class="post-tag" ng-bind="tag">
                                </a>
                            </span>
                         </div>
                         <div class="optb">
                             <span class="like-button" ng-click="vote(post)">热度({{ post.good }})</span>
                             <span class="comment-button comments" ng-click="isCollapsed = !isCollapsed">评论({{ post.comments }})</span>
                         </div>
                     </div>
                 </div>

                 <div id="commentBox" collapse="isCollapsed">
                     <div class="shadow"></div>
                     <div class="up-arrow"></div>
                     <form class="comment-form">
                         <input type="text" name="content" ng-model="content" placeholder="评论" />
                         <input type="submit" class="comment" value="发 布" />
                     </form>

                     <ul class="comment-list">
                         <li ng-repeat="comment in comments">
                             <a href="{{ comment.userName }}">{{ comment.userName }}</a> :
                             {{ comment.content }}

                             <span class="comment-time">{{ comment.time | date: 'yyyy-MM-dd HH:mm:ss' }}</span>
                             <!--登录后有删除按钮-->
                             <a ng-if="name == comment.userName" href="javascript:;" deleteId="{{$index}}" class="deleteCommentButton">删除</a>
                         </li>
                     </ul>
                 </div>
			</li>
            <div ng-if="!posts[0]" class="text-center">
                这里还什么都没有~
                <a href="say" ng-if="userNow == name">发一条</a>
            </div>

            <!--如果有第5条就有可能有第6条-->
            <div ng-if="posts[4]" class="loadMore text-center">
                <button class="btn btn-info btn-sm" ng-click="loadMore()">{{ loader }}</button>
            </div>
		</ul>
            <!--修改post的表单-->
            <div id="edit-form">
                <form ng-submit="form.submit()" class="form-horizontal">
                    <div class="form-group">
                        <label for="editor" class="col-md-2 control-label">内容:</label>
                        <div class="col-md-10 editor-box">
                            <textarea id="editor" placeholder="Content here ...." ng-model="form.content"></textarea>
                        </div>
                    </div>
                    <input type="hidden" id="postId" />
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <label>
                                <input type="checkbox" name="anonymous" ng-model="form.anonymous"> 匿名
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <button type="submit" class="btn btn-default">修改</button>
                            <a class="btn btn-default cancelEditButton">取消</a>
                        </div>
                    </div>
                </form>
            </div>

        <script type="text/javascript">
            (function($) {
                setTimeout(function(){

                    var editor = new Editor();
                    editor.render($('#editor')[0]);
                    $('.CodeMirror').eq(0).on('mouseleave', function () {
                        $('#editor').val(editor.value());
                    });
                    $('.loading').fadeOut();

                    var editForm = $('#edit-form');
                    var editHeight = editForm.css('height');

                    //修改post内容的form表单show 大坑！
                    $('#homeMain').on('click' , '.editPostButton', function(){
                        if($('.editing')){
                            $('.editing').removeClass('editing').css('height', 'auto');
                        }
                        editForm.hide();
                        var li = $(this).parents('.post-single').eq(0);
                        li.addClass('editing').css('height', editHeight);

                        $('#postId').val(li.find('.postIdHidden').html());
                        editor.value(li.find('.contentHidden').html());

                        $('#edit-form').appendTo(li).slideDown();
                        editor.codemirror.refresh();
                    });
                    //hide
                    $('.cancelEditButton').click(function () {
                        var li = $(this).parents('.post-single').eq(0);
                        li.css('height', 'auto');
                        editForm.slideUp();
                        editor.value('');
                    });

                },800);
            })(jQuery);
        </script>
	</div>
</div>
